<template>
  <el-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
    <slot name="resetBefore"></slot>
    <el-button
      class="mr-2"
      v-bind="getResetBtnOptions"
      @click="resetAction"
      v-if="showResetButton"
      >{{ getResetBtnOptions.text }}</el-button
    >
    <slot name="submitBefore"></slot>
    <el-button
      type="primary"
      class="mr-2"
      v-bind="getSubmitBtnOptions"
      @click="submitAction"
      v-if="showSubmitButton"
      >{{ getSubmitBtnOptions.text }}</el-button
    >
    <slot name="advanceBefore"></slot>
    <el-button type="text" size="small" @click="toggleAdvanced" v-if="showAdvancedButton">
      {{ isAdvanced ? '收起' : '展开' }}
      <i v-if="isAdvanced" class="el-icon-arrow-down"></i>
      <i v-else class="el-icon-arrow-up"></i>
    </el-button>
    <slot name="advanceAfter"></slot>
  </el-col>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { ElCol, ElButton } from 'element-plus'
import _Button from 'element-plus/lib/el-button/index'
import { PropType } from '@/global'
import { ColEx } from '../types'
export default defineComponent({
  components: { ElCol, ElButton },
  props: {
    showActionButtonGroup: {
      type: Boolean,
      default: true
    },
    showResetButton: {
      type: Boolean,
      default: true
    },
    showSubmitButton: {
      type: Boolean,
      default: true
    },
    showAdvancedButton: {
      type: Boolean,
      default: true
    },
    resetButtonOptions: {
      type: Object as PropType<typeof _Button>,
      default: () => ({})
    },
    submitButtonOptions: {
      type: Object as PropType<typeof _Button>,
      default: () => ({})
    },
    actionColOptions: {
      type: Object as PropType<Partial<ColEx>>,
      default: () => ({})
    },
    actionSpan: {
      type: Number,
      default: 6
    },
    isAdvanced: {
      type: Boolean,
      default: false
    }
  },
  emits: ['toggle-advanced', 'reset-action', 'submit-action'],
  setup(props, { emit }) {
    const actionColOpt = computed(() => {
      const { showAdvancedButton, actionSpan: span, actionColOptions } = props
      const actionSpan = 24 - span
      const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {}
      const actionColOpt: Partial<ColEx> = {
        span: showAdvancedButton ? 6 : 4,
        ...advancedSpanObj,
        ...actionColOptions
      }
      return actionColOpt
    })
    const getResetBtnOptions = computed(() => {
      return Object.assign(
        {
          text: '重置'
        },
        props.resetButtonOptions
      )
    })

    const getSubmitBtnOptions = computed(() => {
      return Object.assign(
        {
          text: '提交'
        },
        props.submitButtonOptions
      )
    })
    function toggleAdvanced() {
      emit('toggle-advanced')
    }
    function resetAction() {
      emit('reset-action')
    }
    function submitAction() {
      emit('submit-action')
    }
    return {
      toggleAdvanced,
      resetAction,
      submitAction,
      getResetBtnOptions,
      getSubmitBtnOptions,
      actionColOpt
    }
  }
})
</script>
